<!-- src/views/Login/LoginForm.vue -->
<script setup>
defineProps({
  loginData: Object,
  showPassword: Boolean,
  message: Object
});

defineEmits(['submit', 'toggle-password', 'switch-to-register']);
</script>

<template>
  <div>
    <div class="form-header">
      <h2 class="form-title">欢迎回来</h2>
      <p class="form-subtitle">请登录您的账户</p>
    </div>

    <form class="auth-form" @submit.prevent="$emit('submit')">
      <div class="input-group">
        <i class="fas fa-user input-icon"></i>
        <input
            type="text"
            class="form-input"
            placeholder="用户名"
            v-model="loginData.username"
        >
      </div>

      <div class="input-group">
        <i class="fas fa-lock input-icon"></i>
        <input
            :type="showPassword ? 'text' : 'password'"
            class="form-input"
            placeholder="密码"
            v-model="loginData.password"
        >
        <i
            class="fas password-toggle"
            :class="showPassword ? 'fa-eye' : 'fa-eye-slash'"
            @click="$emit('toggle-password')"
        ></i>
      </div>

      <div class="flex-row" style="display: flex; justify-content: space-between; align-items: center;">
        <label style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
          <input type="checkbox" v-model="loginData.remember">
          <span>记住我</span>
        </label>
        <a href="#" class="toggle-link">忘记密码?</a>
      </div>

      <div v-if="message" class="form-message" :class="message.type">
        <i :class="message.icon"></i>
        {{ message.text }}
      </div>

      <button type="submit" class="auth-btn btn-primary">
        <i class="fas fa-sign-in-alt"></i> 登录
      </button>

      <div class="social-login">
        <div class="social-btn">
          <i class="fab fa-qq"></i>
        </div>
        <div class="social-btn">
          <i class="fab fa-weixin"></i>
        </div>
        <div class="social-btn">
          <i class="fab fa-weibo"></i>
        </div>
      </div>
    </form>

    <div class="form-footer">
      <p>
        还没有账户? <a class="toggle-link" @click="$emit('switch-to-register')">立即注册</a>
      </p>
    </div>
  </div>
</template>

<style scoped>
@import '@/assets/auth.css';
</style>
